<template>
	<view class="isqual">
		<view class="isqual-section">
			<view class="isqual-section-h1">机构类型</view>
			<view class="isqual-section-h2">医疗机构</view>
		</view>
		<view class="isqual-section">
			<view class="isqual-section-h1">医疗机构执业许可证</view>
			<view class="isqual-section-img"
				@click="handlePreviewImage('http://baihang.com.cn/Upload/image/2022010404SU74QN.jpg')">
				<image src="http://baihang.com.cn/Upload/image/2022010404SU74QN.jpg" mode=""></image>
			</view>
		</view>
		<view class="isqual-section">
			<view class="isqual-section-h1">营业执照</view>
			<view class="isqual-section-img"
				@click="handlePreviewImage('http://baihang.com.cn/Upload/image/2022010404SU74QN.jpg')">
				<image src="http://baihang.com.cn/Upload/image/2022010404SU74QN.jpg" mode=""></image>
			</view>
		</view>
		<view class="isqual-section">
			<view class="isqual-section-h1">法人身份证上传方式</view>
			<view class="isqual-section-h2">身份证正反面</view>
			<view class="isqual-section-img"
				@click="handlePreviewImage('http://baihang.com.cn/Upload/image/2022010404SU74QN.jpg')">
				<image src="http://baihang.com.cn/Upload/image/2022010404SU74QN.jpg" mode=""></image>
			</view>
		</view>
	</view>
</template>

<script setup>
	const handlePreviewImage = (img) => {
		uni.previewImage({
			current: img, // 当前显示图片的http链接
			urls: [`${img}`]
		});
	}
</script>

<style lang="scss">
	page {
		background: #f3f3f3;
	}

	.isqual {
		padding: 20rpx;

		&-section {
			padding: 20rpx;
			border-radius: 10rpx;
			background: $cf;
			margin-bottom: 20rpx;

			&-h1 {
				font-size: 34rpx;
				color: $c3;
				font-weight: bold;
				margin-bottom: 10rpx;

			}

			&-h2 {
				font-size: 28rpx;
				color: $main-color;
				margin-bottom: 10rpx;

				&:last-child {
					margin-bottom: 0;
				}
			}

			&-img {
				padding-bottom: 75%;
				position: relative;
				overflow: hidden;
				border-radius: 10rpx;

				image {
					position: absolute;
					top: 0;
					left: 0;
					height: 100%;
					width: 100%;
				}
			}
		}
	}
</style>